<script setup>
import { ref, useTemplateRef } from "vue"
import Vieww from "./components/Vieww.vue";
import fcn from "./components/fcn.vue";
import html2canvas from "html2canvas";
const kuaizhao = ref(null)
const jt = useTemplateRef('jt')
const down = useTemplateRef('down')
function xz() {
  html2canvas(jt.value).then(canvas => {  //选择下载的元素
    canvas.toBlob(blob => {
      let url = URL.createObjectURL(blob);
      down.value.href = url; // 设置下载链接
      down.value.download = "test.jpg"; // 设置下载文件名
      down.value.click(); // 触发下载
      URL.revokeObjectURL(url); // 释放 URL 对象；
    })

  })
}
</script>

<template>

  <div class="pgae no-select">
    <img :src="kuaizhao">
    <div class="view" ref="jt">
      <Vieww></Vieww>
    </div>
    <a ref="down" style="display: none;"></a>
    <div class="fcn">
      <fcn></fcn>
    </div>
    <button class="bc" @click="xz">保存</button>
  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.no-select {
  user-select: none;
  /* 禁止文本选择 */
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
}

.view {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fcn {
  position: absolute;
  top: 50%;
  left: 20%;
  transform: translate(0%, -50%);
}

.bc {
  position: absolute;
  bottom: 9%;
  left: 50%;
  transform: translate(-50%, -0%);
  padding: 3px 10px;
}
</style>